<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改商品</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery/jquery.min.js"></script>
<script src="../js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="../js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<style>
input.error {
	border: 1px solid #E6594E;
}
	#image{
	height:200px;
	width:200px;
text-align:center;

	}
</style>
</head>
<body>
	<div class="container">

		<form id="addProductForm" >
			<br />
			<div class="form-group">
				<label for="username">商品名称：</label> <input type="text"
					class="form-control" id="name" name="name" value="${product.name}"
					placeholder="输入名称">
			</div>
			<div class="form-group">
				<label for="userage">商品价格：</label> <input type="text"
					class="form-control" id="price" name="price" value="${product.price}"
					placeholder="输入商品价格">
					<input type="hidden"
					id="id" name="id" value="${product.id}"
					>
			</div>
			<div class="form-group">
				<label for="userage">商品描述：</label> <input type="text"
					class="form-control" id="description" value="${product.description}"
					name="description" placeholder="输入商品信息">
			</div>
			<div class="form-group">
				<label for="userage">商品图片：</label> <input type="file"
					class="form-control" id="pa" name="pa" />
			</div>
		
			<img src="${product.path}" alt="请添加图片" id="image" name="image" class="img-circle">
			
			<div class="form-group">
				<button type="button" id="saveBtn" class="btn btn-success">提交</button>
				<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
			</div>
		</form>
	</div>


</body>

<script type="text/javascript">
$(function(){
$("#pa").change(function(){
var docObj=document.getElementById("pa"); 
var imgObjPreview=document.getElementById("image"); 

if(docObj.files && docObj.files[0]){ 
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); 
}else{ 
docObj.select();//需要过滤路径才能得到路径 
var imgSrc = document.selection.createRange().text; 

imgObjPreview.src = imgSrc; 
}
});
});

var editProduct = function(){
	 if(!check().form()){ 
		return;  
	};
	 var form = new FormData(document.getElementById("addProductForm"));
	 $.ajax({
		   type: "post",
		   dataType: "json",
		   url: "/product/edit",
		   processData:false,
           contentType:false,
		 data:form,//$("#addProductForm").serializeArray()此方法时用来传递表单中无上传文件的
		   success: function(msg){
			   alert(msg);
			 
				$('#cancelBtn').click();			
		   }
	});
};

			$('#saveBtn').on('click', function(){
			
				editProduct();
			});

			//关闭打开的网页
			$('#cancelBtn').on('click', function(){
				var index = parent.layer.getFrameIndex(window.name);
				
				parent.layer.close(index);
			});
	
			
			 //校验字段是否正确 
            function check(){ 
                /*返回一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/ 
              return $("#addProductForm").validate({ 
                            rules:{ 
                            	ordername:{ 
                                    required:true
                                },
                                orderprice:{ 
                                	number:true                                   
                                },
                                orderdescription:{ 
                                    required:true
                                }
                                
                            }, 
                            messages:{ 
                            	ordername:{ 
                                    required:"商品名不能为空"
                                },
                                orderprice:{ 
                                	number:"商品价格为数字"                                
                                },
                                orderdescription:{ 
                                    required:""
                                }
                                
                            }     
                        }); 
            }  

</script>

</html>